<template>
  <div>
    <p>父组件:{{ JSON.stringify(b) }}</p>
    <hr />
    子组件<children :a="a" :b="b" :c="c" v-if="a?.name"></children>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import children from './children.vue';
export default {
  name: '',
  setup() {
    // ref 绑定的数据  子组件能收到  修改后也能收到
    let a = ref({
      name: 'ss'
    });
    // 注： reactive绑定初始值是空对象/空数组  后面又给它赋值一个新对象/数组 那么这个对象/数组不是响应式数据
    // ractive 绑定一个初始对象 不为空 这个对象就是响应式数据  修改它的值会触发数据视图更新
    // reactive 传递给子组件  就会变成一个常量  而且子组件只能收到初始值 修改后收不到 如果想父子都用一个响应式数据，可以将这个变量提取到一个公共js文件暴露
    let b = reactive({
      name: '测试b',
      arr: [
        {
          item: 'cesB'
        }
      ]
    });
    // 常量 传递给子组件  子组件只能收到初始值  修改后的值收不到
    let c = 'title';
    setTimeout(() => {
      a.value = {
        name: '测试a',
        arr: [
          {
            item: 'cesA'
          }
        ]
      };
      b.name = 'b被修改了';
      b.age = '100000';
      c = 'test';
    }, 2000);
    return {
      a,
      b,
      c
    };
  },
  components: {
    children
  }
};
</script>

<style scoped lang="scss"></style>
